<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>登录</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="static/favicon.ico"/>
    <link rel="stylesheet" href="static/common/element/index.css"/>
</head>

<body class="hold-transition login-page">
<div id="app">
    <template>
        <div class="login-container">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px">
                <h3 class="title">系统登录</h3>
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" type="text" v-model="loginForm.username" placeholder="登录账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="登录密码" @keyup.enter.native="login" show-password></el-input>
                </el-form-item>
                <el-form-item prop="remember">
                    <el-row>
                        <el-col :span="20">
                            <el-checkbox v-model="loginForm.remember" class="rememberMe">记住密码</el-checkbox>
                        </el-col>
                        <el-col :span="4">
                            <el-link type="danger" :underline="false" href="#">忘记密码</el-link>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click="login" :loading="loading">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
</div>
</body>
<script type="text/javascript" src="/static/common/vue/vue.min.js"></script>
<script type="text/javascript" src="/static/common/element/index.js"></script>
<script type="text/javascript" src="/static/common/util/axios.min.js"></script>
<script type="text/javascript" src="/static/common/util/vue-cookies.min.js"></script>
<script type="text/javascript" src="/static/common/util/base64.min.js"></script>
<script type="text/javascript" src="/static/common/api.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                loginForm: {
                    username: '',
                    password: '',
                    remember: false,
                },
                rules: {
                    username: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}]
                },
                buttons: [],
            }
        },
        beforeCreate: function () {
            if (self !== top) {
                top.location.href = self.location.href;
            }
        },
        created() {
            // 在页面加载时从cookie获取登录信息
            let accountCookies = this.$cookies.get("AGILE.COOKIE.ACCOUNT")
            // 如果存在赋值给表单，并且将记住密码勾选
            if (accountCookies) {
                const account = Base64.decode(accountCookies);
                if (account.indexOf("_") !== -1) {
                    const login = account.split("_");
                    this.loginForm.username = login[0];
                    this.loginForm.password = Base64.decode(login[1]);
                    this.loginForm.remember = true
                }
            }
        },
        methods: {
            login(event) {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('login', {
                            username: this.loginForm.username,
                            password: this.loginForm.password
                        }).then((res) => {
                            if (res.code === 6666) {
                                sessionStorage.setItem('X-Data-User', JSON.stringify(res.data.user));
                                if (this.loginForm.remember) {
                                    const account = this.loginForm.username + "_" + Base64.encode(this.loginForm.password);
                                    this.$cookies.set("AGILE.COOKIE.ACCOUNT", Base64.encode(account), 60 * 60 * 24 * 30);
                                }
                                parent.location.href = '/view/home.html';
                            } else {
                                this.loading = false;
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        return false;
                    }
                })
            },
        }
    })
</script>
<style scoped>
    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login-container {
        width: 100%;
        height: 100%;
    }
</style>

</html>
